<!--
dataScreen - 数据大屏
-->
<template>
    <div class="dataScreen-container">
        <div class="dataScreen" ref="dataScreenRef">
            <!-- header -->
            <div class="dataScreen-header">
                <div class="header-lf">
                    <span class="header-lf-home" @click="router.push(HOME_URL)">首页</span>
                </div>
                <div class="header-ct">
                    <div class="header-ct-title">
                        <span>智慧旅游可视化大数据监测平台</span>
                        <div class="header-ct-warning">平台高峰预警信息(2条)</div>
                    </div>
                </div>
                <div class="header-rg">
                    <span class="header-rg-report">统计报告</span>
                    <span class="header-rg-time">{{ time }}</span>
                </div>
            </div>

            <!-- main -->
            <div class="dataScreen-main">
                <!-- main.left -->
                <div class="main-lf">
                    <div class="main-lf-top">
                        <div class="main-label">
                            <span>实时游客统计</span>
                            <img src="./images/dataScreen-title.png" alt="" />
                        </div>
                        <div class="main-chart">
                            <realTimeAccessChart ref="realTimeAccessChartRef" />
                        </div>
                    </div>
                    <div class="main-lf-center">
                        <div class="main-label">
                            <span>男女比例</span>
                            <img src="./images/dataScreen-title.png" alt="" />
                        </div>
                        <div class="main-chart">
                            <maleFemaleRatioChart ref="maleFemaleRatioChartRef" />
                        </div>
                    </div>
                    <div class="main-lf-bottom">
                        <div class="main-label">
                            <span>年龄比例</span>
                            <img src="./images/dataScreen-title.png" alt="" />
                        </div>
                        <div class="main-chart">
                            <ageRatioChart ref="ageRatioChartRef" />
                        </div>
                    </div>
                </div>
                <!-- main.center -->
                <div class="main-ct">
                    <div class="main-ct-map">
                        <div class="main-ct-map-title">景区实时客流量</div>
                        <mapChart ref="mapChartRef" />
                    </div>
                    <div class="main-ct-bottom">
                        <div class="main-label">
                            <span>未来30天游客量趋势图</span>
                            <img src="./images/dataScreen-title.png" alt="" />
                        </div>
                        <div class="main-chart">
                            <futureTrendsChart ref="futureTrendsChartRef" />
                        </div>
                    </div>
                </div>
                <!-- main.right -->
                <div class="main-rg">
                    <div class="main-rg-top">
                        <div class="main-label">
                            <span>热门景区排行</span>
                            <img src="./images/dataScreen-title.png" alt="" />
                        </div>
                        <div class="main-chart">
                            <hotPlateChart ref="hotPlateChartRef"></hotPlateChart>
                        </div>
                    </div>
                    <div class="main-rg-center">
                        <div class="main-label">
                            <span>年度游客量对比</span>
                            <img src="./images/dataScreen-title.png" alt="" />
                        </div>
                        <annualUseChart ref="annualUseChartRef"></annualUseChart>
                    </div>
                    <div class="main-rg-bottom">
                        <div class="main-label">
                            <span>预约渠道数据统计</span>
                            <img src="./images/dataScreen-title.png" alt="" />
                        </div>
                        <platformSourceChart ref="platformSourceChartRef"></platformSourceChart>
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>

<script setup lang="ts" name="Data Screen">
import { useRouter } from "vue-router";
import { ECharts } from "echarts";
import { RouterConfig } from "@/config";
import { hookTime } from "@/hooks/hookTime";
import { common } from "@/utils";

import mapChart from "./components/mapChart.vue";
import futureTrendsChart from "./components/futureTrendsChart.vue";

import realTimeAccessChart from "./components/realTimeAccessChart.vue";
import maleFemaleRatioChart from "./components/maleFemaleRatioChart.vue";
import ageRatioChart from "./components/ageRatioChart.vue";

import hotPlateChart from "./components/hotPlateChart.vue";
import annualUseChart from "./components/annualUseChart.vue";
import platformSourceChart from "./components/platformSourceChart.vue";

// 模拟静态数据
import mapData from "./assets/map-data";
import ageData from "./assets/age-data";
import hotData from "./assets/hot-data";
import annualData from "./assets/annual-data";
import platformData from "./assets/platform-data";

// ==================test
common.getRandom(1, 2000);
let x = new Array(30).fill(0).map(() => common.getRandom(1, 20000));
// x = x.map(() => common.getRandom(1, 20000));
// console.log(x)
// =======================

const router = useRouter();
const HOME_URL = RouterConfig.HOME_URL;

// 获取当前时间
const { nowTime } = hookTime();
const time = ref(nowTime.value);

// 计时器01 - 用于更新时间
const timer01 = setInterval(() => {
    time.value = hookTime().nowTime.value;
}, 1000);

// 计时器02 - 用于更新图形数据
const timer02 = setInterval(updateCharts, 3000);

const dataScreenRef = ref<HTMLElement>();

// 获取子组件暴露出来的属性和函数
interface ChartExpose {
    initChart: (params?: any) => ECharts;
    updateChart(params?: any): void;
}

const realTimeAccessChartRef = ref<ChartExpose>(); // 实时客流量
const maleFemaleRatioChartRef = ref<ChartExpose>(); // 男女比例
const ageRatioChartRef = ref<ChartExpose>(); // 年龄比例

const mapChartRef = ref<ChartExpose>();
const futureTrendsChartRef = ref<ChartExpose>(); // 未来趋势

const hotPlateChartRef = ref<ChartExpose>(); // 热点
const annualUseChartRef = ref<ChartExpose>(); // 年度
const platformSourceChartRef = ref<ChartExpose>(); // 平台来源

// 声明 echarts 实例
interface ChartObject {
    [key: string]: ECharts | null;
}

const charts: ChartObject = {
    chart1: null, // 实时客流
    chart2: null, // 男女比例
    chart3: null, // 年龄比例

    mapChart: null, // 地图
    futureTrendsChart: null, // 未来趋势

    chart4: null, // 热门排行
    chart5: null, // 年度游客量对比
    chart6: null, // 预约渠道数据统计
};

/**
 * 初始化图表
 */
function initCharts() {
    // 1.实时客流
    charts.chart1 = realTimeAccessChartRef.value?.initChart(21) as ECharts;
    // 2.男女比例
    charts.chart2 = maleFemaleRatioChartRef.value?.initChart({
        man: 0.7,
        woman: 0.3,
    }) as ECharts;
    // 3.年龄比例
    charts.chart3 = ageRatioChartRef.value?.initChart(ageData) as ECharts;

    // 地图
    charts.mapChart = mapChartRef.value?.initChart(mapData) as ECharts;
    // 未来趋势
    charts.futureTrendsChart = futureTrendsChartRef.value?.initChart({
        unit: ["访问量"],
        data: new Array(30).fill(0).map(() => common.getRandom(1, 20000)),
    }) as ECharts;

    // 4.热门排行
    charts.chart4 = hotPlateChartRef.value?.initChart({
        data: hotData,
        colors: ["#1089E7", "#F57474", "#56D0E3", "#F8B448", "#8B78F6"],
    }) as ECharts;

    // 5.年度游客量对比
    charts.chart5 = annualUseChartRef.value?.initChart({
        data: annualData,
        unit: annualData.map((val) => val.label),
        columns: ["1", "2", "3", "4", "5", "6", "7", "8", "9", "10", "11", "12"],
        colors: ["#FFA600", "#007AFE", "#FF4B7A"],
    }) as ECharts;

    // 6.预约渠道数据统计
    charts.chart6 = platformSourceChartRef.value?.initChart({
        data: platformData,
        colors: ["#078dbc", "#6ad40b", "#6172fc", "#1786ff", "#ffbe2f", "#4dc89d", "#b797df", "#ffd3aa"],
    }) as ECharts;
}

/**
 * 更新图表
 */
function updateCharts() {
    realTimeAccessChartRef.value?.updateChart(common.getRandom(1, 99));

    let male = common.getRandom(1, 99);
    maleFemaleRatioChartRef.value?.updateChart({ man: male / 100, woman: (100 - male) / 100 });

    futureTrendsChartRef.value?.updateChart({
        unit: ["访问量"],
        data: new Array(30).fill(0).map(() => common.getRandom(1, 15000)),
    });
}

/**
 * 绑定事件
 */
onMounted(() => {
    // 初始化时为外层盒子加上缩放属性，防止刷新界面时就已经缩放
    if (dataScreenRef.value) {
        dataScreenRef.value.style.width = `1920px`;
        dataScreenRef.value.style.height = `1080px`;
        dataScreenRef.value.style.transform = `scale(${getScale()}) translate(-50%, -50%)`;
    }
    // 初始化 echarts
    initCharts();
    // 为浏览器绑定事件
    window.addEventListener("resize", resize);
});

/**
 * 根据浏览器大小推断缩放比例 (返回纵横比较小的)
 * @param width
 * @param height
 */
const getScale = (width = 1920, height = 1080) => {
    let ww = window.innerWidth / width;
    let wh = window.innerHeight / height;
    return ww < wh ? ww : wh;
};

/**
 * 监听浏览器 resize 事件
 */
const resize = () => {
    if (dataScreenRef.value) {
        dataScreenRef.value.style.transform = `scale(${getScale()}) translate(-50%, -50%)`;
    }
    // 使用了 scale 的echarts其实不需要需要重新计算缩放比例
    Object.values(charts).forEach((chart) => chart?.resize());
};

/**
 * 销毁时触发
 */
onBeforeUnmount(() => {
    window.removeEventListener("resize", resize);
    clearInterval(timer01); //
    clearInterval(timer02); //
    Object.values(charts).forEach((chart) => chart?.dispose());
});
</script>

<style scoped lang="less">
@import url("./index.less");
</style>

<!-- 

<script setup lang="ts" name="dataScreen">
import { randomNum } from "@/utils";


// 初始化 echarts
const initCharts = (): void => {
  


  
};


 -->
